<template>
  <suspense>
    <template #default>
      <Tabs>
        <Tabs.TabPane v-for="config of configs" :key="config.Id" :tab="config.Category" :style="panelStyle">
          <deploy :maxHeight="contentHeight" :config="config" />
        </Tabs.TabPane>
      </Tabs>
    </template>
    <template #fallback>
      <h2>正在加载中，请稍候...</h2>
    </template>
  </suspense>
</template>
<script setup>
  import { useStore } from 'vuex';
  import { ref, inject, computed, defineAsyncComponent, onMounted } from 'vue';
  import { Tabs } from 'ant-design-vue';

  const deploy = defineAsyncComponent(() => import('./components/Deploy.vue'));

  const $store = useStore();

  const $http = inject('$http');
  const $eventBus = inject('$eventBus');

  const contentHeight = ref(400);
  const configs = ref([]);

  const panelStyle = computed(() => {
    return {
      minHeight: contentHeight.value + 'px',
      maxHeight: contentHeight.value + 'px'
    };
  });

  function ResizeChartPanel(area) {
    contentHeight.value = area.height - 80;
  }

  function getConfigs() {
    $http.get('/api/publish/configs').then(res => {
      configs.value = res.datas;
    });
  }

  onMounted(() => {
    getConfigs();

    ResizeChartPanel($store.state.area.content);

    $eventBus.on('windowResizeChanged', client => ResizeChartPanel(client));
  });
</script>

<style lang="less" scoped>
  :deep(div.shell) {
    color: #fff;
    font-size: 14px;
    font-family: 'Courier New', Courier, monospace;
    background-color: #333;

    > p {
      margin: 0;
      padding: 0 5px 0 5px;
      line-height: 22px;
      white-space: nowrap;
      width: 100%;
      display: inline-block;

      &.code {
        color: #fff;
        margin: 0;
        cursor: pointer;
        width: 100%;
        user-select: all;
        padding: 5px 10px;
        background: rgb(25, 135, 84);
      }
    }

    &.code {
      color: #fff;
      background: rgb(25, 135, 84);
    }

    &.headers {
      width: 100%;
      display: inline-block;

      > p {
        &:last-of-type {
          margin-top: 10px;
          color: #333;
          background-color: #fff;
        }
      }
    }

    &.details {
      overflow: auto;
      max-height: 300px;
      height: 100%;
    }
  }
</style>
